<template>
	<view class="jobCard"  @click="toJobDetail">
		<view class="jobName">
			{{jobname}}
		</view>
		<view class="salary">
			<span>{{salary}}元</span>/小时
		</view>
		<view class="tag">
			<span v-for="item,index in tag" :key="index">{{item}}</span>
		</view>
		<view class="location">
			<image src="/static/img/homePagePic_slices/Group252@2x.png" mode="scaleToFill"></image>
			<span>{{location.distance}}{{' '}}|{{'  '}}{{location.name}}</span>
		</view>
		<view class="boss">
			<image src="/static/img/homePagePic_slices/Group424@2x.png" mode="scaleToFill"></image>
			<span>{{boss}}</span>
		</view>
		<view class="button">
			
			<button>立即报名</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"jobCard",
		data() {
			return {
				jobname:'职位名称（只限12个字符）',
				salary:800,
				tag:['日结','长期兼职','有提成'],				
				location:{
					distance:15.19,
					name:"东莞市"
				},
				boss:"周泽龙·个人"
			}
		},
		methods:{
			toJobDetail(){
				uni.navigateTo({
					url:'/subpageB/common/jobDetail'
				})
			}
		}
	}
</script>

<style scoped>
	.jobCard{
		position: relative;
		margin: 32rpx;
		width: 686rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.jobName{
		/* position: absolute;
		transform: translate(32rpx,24rpx); */
		padding-top: 24rpx;
		padding-left: 32rpx;
		width: 360rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #001A18;
		line-height: 32rpx;
		-webkit-background-clip: text;
	}
	.salary{
		position: absolute;
		top: 24rpx;
		right: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #FF5F58;
		line-height: 38rpx;
	}
	.salary span{
		font-size: 40rpx;
	}
	.tag{
		padding-left: 32rpx;
		font-size: 10px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #505E5C;
		
	}
	.tag span{
		margin-right: 6rpx;
		padding: 6rpx;
		background: #F3F7F8;
		border-radius: 8rpx;
	}
	
	.location{
		padding-left: 32rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #505E5C;
		line-height: 16px;
	}
	.location image{
		width:16rpx;
		height: 16rpx;
	}
	
	.boss{
		padding-top: 20rpx;
		padding-left: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
		
	}
	.boss>span{
		margin-bottom: 4rpx;
	}
	.boss image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: -8rpx;
		padding-right: 6rpx;
	}
	
	button{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 32rpx;
		bottom: 24rpx;
		width: 160rpx;
		height: 58rpx;
		background: #08C8BD;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	/* .button button{
		width: 160rpx;
		height: 60rpx;
		font-size: 12px;
		font-weight: 500;
		line-height: 20rpx;
		color: #FFFFFF;
		background: #08C8BD;
		border-radius: 8px 8px 8px 8px;
		
	} */
</style>